<template>
	<div id="holidayConfig">
		<div class="breadcrumb">
			<img src="../../../../static/img/venueManage_1.png" class="head_img">
			<span class="title">节假日设置</span>
		</div>
		<div class="list">
			<div class="list_head">
				<span class="tips">设置节假日时间，以便于设置节假日期间场地价格</span>
				<el-button class="save" type="primary" @click="save()">保存</el-button>
				<el-button class="cancel" type="primary" @click="cancel()">取消</el-button>
			</div>
			<span class="label">节假日时间：</span>
			<el-date-picker v-model="timeRange" type="daterange" placeholder="选择日期范围" format="yyyy/MM/dd" @change="addTimeRange()"></el-date-picker>
			<div class="holidayContain">
				<span v-for="(item,index) in holiday" :key="index" v-if="item" class="holidaySpan">{{new Date(item.holidayStart).format('yyyy/MM/dd')}} - {{new Date(item.holidayEnd).format('yyyy/MM/dd')}}
					<i @click="deleteHoliday(item)" class="el-icon-circle-close"></i>
				</span>
			</div>
		</div>
		<el-dialog title="删除节假日" :visible.sync="dialogFormVisible_holidayConfig">
			<div>是否确认删除？删除节假日后，在该节假日内产生的订单记录将同时删除</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="configPrice()">确认删除</el-button>
				<el-button type="primary" @click="dialogFormVisible_holidayConfig = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				rootUnid: "",
				timeRange: [],
				holiday: [],
				deleteItem: {},
				dialogFormVisible_holidayConfig: false
			};
		},
		mounted() {
			this.rootUnid = this.user.rootUnid;
			this.getHoliday();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//添加节假日时间段;
			addTimeRange() {
				let timeStart = new Date(
					new Date(this.timeRange[0]).format("yyyy/MM/dd 00:00:00")
				).getTime();
				let timeEnd = new Date(
					new Date(this.timeRange[1]).format("yyyy/MM/dd 23:59:59")
				).getTime();

				if (this.holiday.length < 1) {
					let holidayStart = new Date(timeStart).format("yyyy-MM-dd");
					let holidayEnd = new Date(timeEnd).format("yyyy-MM-dd");
					this.holiday.push({
						describe: "",
						holidayEnd: holidayEnd,
						rootUnid: this.rootUnid,
						holidayStart: holidayStart
					});
				} else {
					for (let i = 0; i < this.holiday.length; i++) {
						let preStart = new Date(
							new Date(this.holiday[i].holidayStart).format("yyyy/MM/dd 00:00:00")
						).getTime();
						let preEnd = new Date(
							new Date(this.holiday[i].holidayEnd).format("yyyy/MM/dd 23:59:59")
						).getTime();

						if (
							this.holiday.length == 1 &&
							(timeStart > preEnd || timeEnd < preStart)
						) {
							let holidayStart = new Date(timeStart).format("yyyy-MM-dd");
							let holidayEnd = new Date(timeEnd).format("yyyy-MM-dd");
							this.holiday.push({
								describe: "",
								holidayEnd: holidayEnd,
								rootUnid: this.rootUnid,
								holidayStart: holidayStart
							});
							return;
						} else {
							if (
								this.holiday.length > 1 &&
								!(timeStart > preEnd || timeEnd < preStart)
							) {
								this.$util.errorMsg("节假日时间重叠，添加失败！", "失败");
								return;
							}
							if (
								i == this.holiday.length - 1 &&
								(timeStart > preEnd || timeEnd < preStart)
							) {
								// 可以添加
								let holidayStart = new Date(timeStart).format("yyyy-MM-dd");
								let holidayEnd = new Date(timeEnd).format("yyyy-MM-dd");
								this.holiday.push({
									describe: "",
									holidayEnd: holidayEnd,
									rootUnid: this.rootUnid,
									holidayStart: holidayStart
								});
								return;
							}
						}
					}
				}
			},
			//删除节假日时间段;
			deleteHoliday(item) {
				this.dialogFormVisible_holidayConfig = true;
				this.deleteItem = item;
			},
			// 确认删除
			configPrice() {
				if (this.deleteItem.canEdit == false) {
					this.$util.errorMsg("节假日正在进行或已有预约，不能删除！", "失败");
				} else {
					this.holiday = this.holiday.filter(i => {
						return i.holidayStart.indexOf(this.deleteItem.holidayStart) == -1;
					});
					this.dialogFormVisible_holidayConfig = false;
					this.deleteItem = {};
					this.$util.successMsg("删除成功");
				}
			},
			// 查询节假日所有的时间段
			getHoliday() {
				let url = this.$util.domain + "/erp/api/v20/venue/holiday";

				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						if (response.data.data) {
							this.holiday = response.data.data;
						}
					}
				});
			},
			//保存
			save() {
				let url = this.$util.domain + "/erp/api/v20/venue/editholiday";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({ holidays: this.holiday })
				}).then(response => {
					if (response.data.error == 10000) {
						location.href = "/#/venueManage";
					} else {
						this.$util.errorMsg(response.data.message);
					}
				}, (response) => {
					this.$util.errorMsg(response.data.message);
				});
			},
			//返回
			cancel() {
				location.href = "/#/venueManage";
			},
			timeFormat(timeStr) {
				let startTime = timeStr.split("-")[0] + " 00:00:00";
				let endTime = timeStr.split("-")[1] + " 23:59:59";
				return {
					endTime: new Date(endTime).getTime(),
					startTime: new Date(startTime).getTime()
				};
			}
		}
	};
</script>

<style scoped>
	#holidayConfig {
		padding-top: 80px;
		height: calc(100% - 100px);
		overflow: hidden;
	}

	.tips {
		color: red;
		font-size: 12px;
		margin-bottom: 20px;
	}

	.label {
		text-align: right;
		vertical-align: middle;
		float: left;
		font-size: 14px;
		color: #48576a;
		line-height: 1;
		padding: 11px 12px 11px 0;
		box-sizing: border-box;
	}

	#holidayConfig .holidayContain {
		margin-top: 10px;
		margin-left: 96px;
		width: 700px;
		height: 135px;
		border: solid 1px #bfcbd9;
		box-sizing: border-box;
		overflow-y: scroll;
	}

	#holidayConfig .holidaySpan {
		display: block;
		text-align: center;
		float: left;
		height: 30px;
		line-height: 30px;
		padding: 0 15px 0 15px;
		border: solid 1px #999;
		border-radius: 5px;
		margin: 10px;
		box-sizing: border-box;
		font-size: 12px;
		position: relative;
		cursor: pointer;
	}
</style>